<template>
    <div class="alarmRecords">
        <el-form ref="form" :model="formSearch" label-width="80px" :inline="true" size="small">
            <el-form-item label="警情名称">
                <el-input v-model="formSearch.warnName" placeholder="请输入报警名称" clearable/>
            </el-form-item>
            <el-form-item label="警情类型">
                <el-input v-model="formSearch.warnType" placeholder="请输入报警类型" clearable/>
            </el-form-item>
            <el-form-item label="设备类型">
                <el-select v-model="formSearch.devType" clearable>
                    <el-option label="公区设备" value="1"></el-option>
                    <el-option label="室内设备" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="报警位置">
                <el-input v-model="formSearch.warnLocation" placeholder="请输入报警位置0 clearable"/>
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker v-model="formSearch.startTime" type="datetime" value-format="timestamp" placeholder="选择开始日期" align="right"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker v-model="formSearch.endTime" type="datetime" value-format="timestamp" placeholder="选择结束日期" align="right"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button @click="getList">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="warnLocation" label="报警位置"></el-table-column>
            <el-table-column prop="warnName" label="警情名称"></el-table-column>
            <el-table-column prop="warnType" label="警情类型"></el-table-column>
            <el-table-column prop="devType" label="设备类型">
                <template>
                    <div>
                        {{scope.row.devType == 1 ? '公区设备' : scope.row.devType == 2 ? '室内设备' : ''}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="gmtCreate" label="报警时间"></el-table-column>
            <el-table-column prop="mainAddress" label="主机地址"></el-table-column>
            <el-table-column prop="alarmAddress" label="报警地址"></el-table-column>
        </el-table>
        <paging @changePage='handleCurrentPage' :get-total='total'></paging> -->
    </div>
</template>

<script>
import paging from '../../components/paging';
import { getAlarmRecords } from '../../url/api';
export default {
    data() {
        return {
            tableData: [],
            formSearch: {
                size: 10,
                current: 1,
            },
            total: 0,
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        },
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        },
                    },
                    {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        },
                    },
                ],
            },
        };
    },
    methods: {
        getList() {
            let eT = this.formSearch.endTime;
            let eS = this.formSearch.startTime;
            console.log(this.formSearch);
            if ((eT && eS) || (!eT && !eS)) {
                getAlarmRecords(this.formSearch).then((res) => {
                    if (res.data.ok) {
                        this.tableData = res.data.data.records;
                        this.total = res.data.data.total;
                    }
                });
            } else {
                this.$message.info('查询时间只能为区间');
            }
        },
        handleCurrentPage(val) {
            this.formSearch.current = val;
            this.getList();
        },
    },
    mounted() {
        this.getList();
    },
    components: {
        paging,
    },
};
</script>

<style lang='scss' scoped>
.alarmRecords /deep/ .el-date-editor.el-input {
    width: 150px;
}
</style>
